<template>
  <div>
    <div class="serveList">
      <!-- 所有搜索框 -->
      <div class="serveList_serach">
        <el-form ref="ruleForm" class="demo-ruleForm" :inline="true">
          <el-form-item label="服务商名称:" prop="serviceName">
            <el-input
              v-model="serverQuery.serviceName"
              placeholder="请输入服务商名称"
              clearable
              @change="getmySearch"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人:" prop="userName">
            <el-input
              v-model="serverQuery.userName"
              placeholder="请输入负责人名称"
              clearable
              @change="getmySearch"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务商规模:" prop="scale">
            <el-select
              v-model="serverQuery.scale"
              clearable
              placeholder="请选择服务商规模"
              @change="getmySearch"
            >
              <el-option
                v-for="item in serverScal"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务商地址:" prop="scale">
            <el-cascader
              :props="provinceProps"
              placeholder="请选择省/市/区"
              v-model="serverQuery.address"
              :options="provinceList"
              clearable
              @change="changeproivince"
            ></el-cascader>
          </el-form-item>

          <el-form-item prop="region">
            <el-button type="primary" @click="getmySearch">确认搜索</el-button>
          </el-form-item>
          <el-form-item>
            <!-- 顶部 -->
            <div class="serveList_top">
              <el-button type="success" @click="showserverListDialog"
                >添加服务商</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <el-table
        :data="serveList"
        style="margin-top: 20px"
        border
        :header-cell-style="{
          width: '100%',
          background: '#FAFAFA',
          color: '#606266',
          height: '60px'
        }"
      >
        <el-table-column prop="no" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="服务商名称" width="180">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.name == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="petname" label="负责人">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.petname == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.petname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="150">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.phone == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.phone }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="isAuto" label="是否开启自动派单" width="150">
          <template slot-scope="scoped">
            <div>
              <el-switch
                v-model="scoped.row.isAuto"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handlerStatus($event, scoped.row)"
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="businessLicense" label="营业执照" width="120">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  :src="scoped.row.businessLicense"
                  alt
                  style="width: 40px; height: 40px"
                />
              </viewer>
              <span v-if="scoped.row.businessLicense == null" style="color: red"
                >暂无营业执照</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="IdCard" label="身份证正面照" width="140">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  :src="scoped.row.IdCard"
                  alt
                  style="width: 40px; height: 40px"
                />
              </viewer>
              <span v-if="scoped.row.IdCard == null" style="color: red"
                >暂无身份证正面照</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="服务商位置" width="280">
          <template slot-scope="scoped">
            <div>
              {{ scoped.row.name_province }}{{ scoped.row.name_city
              }}{{ scoped.row.name_area }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="scale" label="服务商规模" width="150">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.scale == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.scale }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="280">
          <template slot-scope="scoped">
            <div>
              <el-tag
                type="success"
                style="cursor: pointer"
                @click="showEditDialog(scoped.row.id, scoped.row)"
                >编辑</el-tag
              >
              <el-tag
                type="warning"
                style="cursor: pointer"
                @click="showViewDialog(scoped.row.id, scoped.row)"
                >查看</el-tag
              >
              <el-tag
                type="info"
                style="cursor: pointer"
                @click="handlerDelService(scoped.row.id)"
                >删除</el-tag
              >
              <el-tag
                type="primary"
                style="cursor: pointer"
                @click="handlerexamine(scoped.row.id, scoped.row)"
                >审核</el-tag
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="serverQuery.pageSize"
          :current-page="serverQuery.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="servertotal"
          class="management_page"
        ></el-pagination>
      </div>
      <el-dialog
        :title="addserverlist"
        :visible.sync="addServedialogVisible"
        width="40%"
        @close="handleClose"
      >
        <el-form
          :model="serviceForm"
          :rules="serviceRules"
          ref="serviceRef"
          label-width="100px"
          class="demo-ruleForm1"
          :label-position="labelPosition"
        >
          <el-form-item label="服务商名称(必填):" prop="name">
            <el-input
              v-model="serviceForm.name"
              :disabled="disabled"
              placeholder="请输入服务商名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="所属用户"
            prop="roleId"
            v-if="addserverlist == '添加服务商'"
          >
            <el-select
              v-model="serviceForm.userId"
              placeholder="请选择所属用户"
              clearable
              @change="handlerGet"
            >
              <el-option
                v-for="item in FreeWorkerList"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="负责人(必填):"
            prop="petName"
            v-if="addserverlist == '添加服务商'"
          >
            <el-input
              v-model="serviceForm.petName"
              :disabled="disabled"
              placeholder="请输入负责人"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="负责人(必填):"
            prop="workerId"
            v-if="addserverlist == '编辑服务商'"
          >
            <el-select
              v-model="serviceForm.workerId"
              placeholder="请选择负责人"
              clearable
              @change="handleSelectworkerId"
            >
              <el-option
                v-for="item in chooseEmployeeList"
                :key="item.workerId"
                :label="item.petName"
                :value="item.workerId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="手机号码(必填):"
            prop="phone"
            v-if="addserverlist == '添加服务商'"
          >
            <el-input
              v-model="serviceForm.phone"
              :disabled="disabled"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务商位置(必填):" prop="address">
            <el-input
              v-model="serviceForm.address"
              :disabled="disabled"
              clearable
              placeholder="请输入服务商位置"
            >
              <el-button
                slot="append"
                icon="el-icon-location-information"
                @click="showMap"
                :disabled="disabled"
              ></el-button>
            </el-input>
          </el-form-item>

          <el-form-item label="服务商规模(必填):" prop="scale">
            <el-select
              v-model="serviceForm.scale"
              clearable
              placeholder="请选择服务商规模"
              :disabled="disabled"
              @change="handlerScal"
            >
              <el-option
                v-for="item in serverScal"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="公司名称(必填):" prop="companyId">
            <el-select
              v-model="serviceForm.companyId"
              clearable
              placeholder="请选择公司名称"
              :disabled="disabled"
              @change="handlercompanyId"
            >
              <el-option
                v-for="item in companySelList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item
            label="所属角色"
            prop="roleId"
            v-if="addserverlist == '编辑服务商'"
          >
            <el-select
              v-model="serviceForm.roleId"
              placeholder="请选择所属角色"
              clearable
              :disabled="disabledrole"
              @change="handleSelectroleId(serviceForm.roleId)"
            >
              <el-option
                v-for="item in roleSelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属角色"
            prop="roleId"
            v-if="addserverlist == '添加服务商'"
          >
            <el-select
              v-model="serviceForm.roleId"
              placeholder="请选择所属角色"
              clearable
              :disabled="disabled"
              @change="handleSelectroleId(serviceForm.roleId)"
            >
              <el-option
                v-for="item in roleSelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属角色"
            prop="roleId"
            v-if="addserverlist == '审核服务商'"
          >
            <el-select
              v-model="serviceForm.roleId"
              placeholder="请选择所属角色"
              clearable
              @change="handleSelectroleId(serviceForm.roleId)"
            >
              <el-option
                v-for="item in roleSelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否自动派单:" prop="isAuto">
            <el-select
              v-model="serviceForm.isAuto"
              placeholder="请选择开启或者不开启"
              @change="handlerisAuto"
              :disabled="disabled"
            >
              <el-option
                v-for="item in autoList"
                :label="item.name"
                :value="item.isAuto"
                :key="item.isAuto"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="营业执照:" prop="businessLicense">
            <!-- <UploadImg
              @getImgSrc="getImg"
              :options="options"
              :disabled="disabled"
              :list="serviceForm.businessLicense"
            /> -->
            <ele-upload-image
              :action="action"
              v-model="serviceForm.businessLicense"
              :lazy="true"
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="getImg"
            ></ele-upload-image>
          </el-form-item>
          <el-form-item label="身份证正面照 :" prop="IdCard">
            <!-- <UploadImg
              @getImgSrc="getImg1"
              :options="options1"
              :disabled="disabled"
              :list="serviceForm.IdCard"
            /> -->
            <ele-upload-image
              :action="action"
              v-model="serviceForm.IdCard"
              :lazy="true"
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="getImg1"
            ></ele-upload-image>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="hidehandleClose"
            v-if="addserverlist == '添加服务商'"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="handlerSure"
            v-if="addserverlist == '添加服务商'"
            >确 定</el-button
          >
          <el-button
            @click="hidehandleClose"
            v-if="addserverlist == '编辑服务商'"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="handlerSure"
            v-if="addserverlist == '编辑服务商'"
            >确 定</el-button
          >
          <el-button
            @click="hidehandleClose"
            v-if="addserverlist == '查看服务商'"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="handlerSure"
            v-if="addserverlist == '查看服务商'"
            >确 定</el-button
          >
          <el-button @click="handlerQu" v-if="addserverlist == '审核服务商'"
            >拒绝审核</el-button
          >
          <el-button
            type="primary"
            @click="handlerShen"
            v-if="addserverlist == '审核服务商'"
            >确定审核</el-button
          >
        </span>
      </el-dialog>
      <!-- 地图 -->
      <el-dialog :show-close="false" :visible.sync="visible" width="600px">
        <SelectMap @getMapInfo="getMaolist" v-show="visible" />
        <el-button
          type="primary"
          @click="visible = false"
          style="margin-top: 20px"
          >确 定</el-button
        >
      </el-dialog>
    </div>
  </div>
</template>
<script>
import provinceJson from "../../utils/province.json";
import SelectMap from "../../components/SelectMap";
import UploadImg from "../../components/UploadImg";
import {
  mySearch,
  serviceAdd,
  serviceUpdate,
  serviceDel,
  serviceDetail,
  roleSelNoPage,
  chooseEmployee,
  serviceAuto,
  serviceExamine,
  companySel,
  getFreeWorker
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      options: {
        type: "picture-card",
        limit: 1
      },
      options1: {
        type: "picture-card",
        limit: 1
      },
      action: "https://devicedata.wadd.vip/api/v1.node/uploadImg",
      ruleForm: {
        serviceName: "",
        userName: "",
        scale: "",
        provinceId: "",
        cityId: "",
        areaId: ""
      },
      disabledrole: true,
      // 服务商列表
      serveList: [],
      // 服务商列表的校验
      serviceRules: {
        name: [
          { required: true, message: "请输入服务商名称", trigger: "blur" }
        ],
        petName: [
          { required: true, message: "请输入负责人名称", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式错误"
          }
        ],
        address: [
          { required: true, message: "请输入服务商位置", trigger: "blur" }
        ],
        scale: [
          { required: true, message: "请输入服务商规模", trigger: "blur" }
        ],
        roleId: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        isAuto: [
          { required: true, message: "请选择是否自动派单", trigger: "blur" }
        ],
        companyId: [{ required: true, message: "请选择公司", trigger: "blur" }]
        // businessLicense: [
        //   { required: true, message: "请上传营业执照", trigger: "blur" }
        // ],
        // IdCard: [
        //   { required: true, message: "请上传身份证正面照 ", trigger: "blur" }
        // ]
      },
      addserverlist: "添加服务商",
      // 显示添加服务商的弹框
      addServedialogVisible: false,
      labelPosition: "top",
      // 服务商弹框的表单
      serviceForm: {
        serviceName: "",
        lgt: 0,
        lat: 0,
        scale: "",
        phone: "",
        name_province: "",
        address: "",
        name_city: "",
        name_area: "",
        petName: "",
        name: "",
        userId: "",
        roleId: "",
        workerId: "",
        isAuto: "",
        businessLicense: "",
        IdCard: "",
        id: "",
        companyId: ""
      },
      // 地图的显示隐藏
      mapFlag: false,
      // 查看时禁用输入框
      disabled: false,
      //   分页
      serverQuery: {
        pageSize: 10,
        pageNumber: 1,
        serviceName: "",
        userName: "",
        scale: "",
        address: "",
        province: "",
        city: "",
        area: ""
      },
      // 服务商列表的总条数
      servertotal: 0,
      // 地图的弹框
      visible: false,
      provinceProps: {
        //地址级联选择器配置对象
        label: "name",
        children: "children",
        value: "name"
      },
      provinceList: [], // 地址数据
      // 服务商规模
      serverScal: [
        {
          id: 1,
          name: "1~10人"
        },
        {
          id: 2,
          name: "10~50人"
        },
        {
          id: 3,
          name: "50~200人"
        },
        {
          id: 4,
          name: "200人以上"
        }
      ],
      userId: "",
      petName: "",
      // 角色列表
      roleSelList: [],
      // 负责人数据
      chooseEmployeeList: [],
      // 开始自动派单的数组
      autoList: [
        {
          isAuto: 1,
          name: "开启"
        },
        {
          isAuto: 2,
          name: "不开启"
        }
      ],
      // 公司的列表
      companySelList: [],
      FreeWorkerList: []
    };
  },
  components: {
    SelectMap,
    UploadImg
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.serverQuery.pageNumber = 1;
      this.getmySearch();
    }
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getmySearch();
      }
    },
    // 获取服务商空闲人员
    handlergetFreeWorker() {
      this.postRequest(getFreeWorker).then(res => {
        if (res.code == 200) {
          this.FreeWorkerList = res.data;
        }
      });
    },
    handlerGet(val) {
      this.FreeWorkerList.map(item => {
        if (item.userId == val) {
          this.serviceForm.petName = item.realName;
          this.serviceForm.phone = item.phone;
        }
      });
    },
    // 角色查询
    getroleSel() {
      const params = {
        pageNumber: 1,
        pageSize: 10,
        PermissionType: 3,
        companyId: this.org_id
      };
      this.postRequest(roleSelNoPage, params).then(res => {
        if (res.code == 200) {
          this.roleSelList = res.data;
        }
      });
    },
    // 服务商选择负责人
    getchooseEmployee(id) {
      const params = {
        id: id
      };
      this.postRequest(chooseEmployee, params).then(res => {
        if (res.code == 200) {
          this.chooseEmployeeList = res.data;
        }
      });
    },
    // 获取公司的无分页列表
    // getcompanySel() {
    //   this.postRequest(companySel).then(res => {
    //     if (res.code == 200) {
    //       this.companySelList = res.data;
    //     }
    //   });
    // },
    changeproivince(val) {
      const params = {
        name_province: val[0],
        name_city: val[1],
        name_area: val[2],
        pageNumber: this.serverQuery.pageNumber,
        pageSize: this.serverQuery.pageSize,
        companyId: this.org_id
      };
      this.postRequest(mySearch, params).then(res => {
        this.serveList = res.data.data;
      });
    },
    // 点击添加服务商显示弹框
    showserverListDialog() {
      this.addServedialogVisible = true;
      this.addserverlist = "添加服务商";
      this.disabled = false;
      this.getroleSel();
    },
    // 获取地区信息
    getMaolist(val) {
      const pname = val.pname && val.pname !== null ? val.pname : ""; //省
      const cityname =
        val.cityname && val.cityname !== null ? val.cityname : ""; //市
      const adname = val.adname && val.adname !== null ? val.adname : ""; //区
      const address = val.address && val.address !== null ? val.address : ""; //详细地址
      const tel =
        val.tel && val.tel !== null
          ? Array.isArray(val.tel)
            ? val.tel.join(",")
            : val.tel
          : ""; //服务电话

      const Address = pname + "" + cityname + "" + adname + "" + address;
      const result = val.location.split(",");

      this.serviceForm.lgt = result[0];
      this.serviceForm.lat = result[1];
      this.serviceForm.province = val.pname;
      this.serviceForm.address = Address;
      this.serviceForm.city = val.cityname;
      this.serviceForm.area = val.adname;
    },
    // 点击地理位置显示地图
    showMap() {
      this.visible = !this.visible;
    },
    // 获取编辑规模的id
    handlerScal(val) {
      this.serviceForm.scale = val;
    },
    // 获取是否自动派单
    handlerisAuto(val) {
      this.serviceForm.isAuto = val;
    },
    // 点击确定
    handlerSure() {
      this.$refs["serviceRef"].validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.addserverlist == "添加服务商") {
          this.handlerAddServe();
        } else if (this.addserverlist == "编辑服务商") {
          this.handlerEditServe();
        }
      });
    },
    //封装一个添加服务商的函数
    handlerAddServe() {
      const params = {
        serviceName: this.serviceForm.name,
        lgt: this.serviceForm.lgt,
        lat: this.serviceForm.lat,
        scale: this.serviceForm.scale,
        phone: this.serviceForm.phone,
        province: this.serviceForm.province,
        address: this.serviceForm.address,
        city: this.serviceForm.city,
        area: this.serviceForm.area,
        petName: this.serviceForm.petName,
        userId: this.serviceForm.userId,
        roleId: this.serviceForm.roleId,
        isAuto: this.serviceForm.isAuto,
        businessLicense: this.serviceForm.businessLicense,
        IdCard: this.serviceForm.IdCard,
        companyId: this.org_id
      };
      this.postRequest(serviceAdd, params).then(res => {
        if (res.code == 200) {
          this.$message.success("添加服务商成功");
          this.addServedialogVisible = false;
          this.getmySearch();
          this.$refs.serviceRef.resetFields();
        } else if (res.code == 400) {
          this.$message.error(res.msg);
          // console.log("错误")
        }
      });
    },
    //封装一个编辑服务商的函数
    handlerEditServe() {
      const params = {
        id: this.serviceForm.id,
        serviceName: this.serviceForm.name,
        userId: this.userId,
        lgt: this.serviceForm.lgt,
        lat: this.serviceForm.lat,
        scale: this.serviceForm.scale,
        province: this.serviceForm.province,
        city: this.serviceForm.city,
        area: this.serviceForm.area,
        address: this.serviceForm.address,
        workerId: this.serviceForm.workerId,
        isAuto: this.serviceForm.isAuto,
        businessLicense: this.serviceForm.businessLicense,
        IdCard: this.serviceForm.IdCard,
        companyId: this.org_id
      };
      this.postRequest(serviceUpdate, params).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑服务商成功");
          this.addServedialogVisible = false;
          this.getmySearch();
          this.$refs.serviceRef.resetFields();
        }
      });
    },
    // 点击编辑显示弹框
    showEditDialog(id, data) {
      this.addserverlist = "编辑服务商";
      this.addServedialogVisible = true;
      this.disabled = false;
      this.getchooseEmployee(id);
      this.getroleSel();

      const params = {
        id: id
      };
      this.postRequest(serviceDetail, params).then(res => {
        this.serviceForm = res.data[0];
        this.serviceForm.address =
          res.data[0].name_province +
          res.data[0].name_city +
          res.data[0].name_area;
        this.serviceForm.province = res.data[0].name_province;
        this.serviceForm.city = res.data[0].name_city;
        this.serviceForm.area = res.data[0].name_area;
        this.serviceForm.workerId = res.data[0].userId;
        this.serviceForm.roleId = "服务商普通用户";
        this.serviceForm.IdCard = data.IdCard;
        this.serviceForm.isAuto = Number(res.data[0].isAuto);
        this.serviceForm.businessLicense = data.businessLicense;
      });
    },
    // 点击查看显示弹框
    showViewDialog(id, data) {
      this.addserverlist = "查看服务商";
      this.addServedialogVisible = true;
      this.disabled = true;
      this.getchooseEmployee(id);
      this.getroleSel();
      console.log(data);
      const params = {
        id: id
      };
      this.postRequest(serviceDetail, params).then(res => {
        this.serviceForm = res.data[0];
        this.serviceForm.address =
          res.data[0].name_province +
          res.data[0].name_city +
          res.data[0].name_area;
        this.serviceForm.province = res.data[0].name_province;
        this.serviceForm.city = res.data[0].name_city;
        this.serviceForm.area = res.data[0].name_area;
        this.serviceForm.workerId = res.data[0].userId;
        this.serviceForm.roleId = "服务商普通用户";
        this.serviceForm.IdCard = data.IdCard;
        this.serviceForm.businessLicense = data.businessLicense;
        // this.serviceForm.isAuto=data.isAuto==true?1:2
        this.serviceForm.isAuto = Number(res.data[0].isAuto);
      });
    },
    // 点击审核 显示弹框
    handlerexamine(id, data) {
      this.addserverlist = "审核服务商";
      this.addServedialogVisible = true;
      this.disabled = false;
      this.getchooseEmployee(id);
      this.getroleSel();

      const params = {
        id: id
      };
      this.postRequest(serviceDetail, params).then(res => {
        this.serviceForm = res.data[0];
        this.serviceForm.address =
          res.data[0].name_province +
          res.data[0].name_city +
          res.data[0].name_area;
        this.serviceForm.province = res.data[0].name_province;
        this.serviceForm.city = res.data[0].name_city;
        this.serviceForm.area = res.data[0].name_area;
        this.serviceForm.workerId = res.data[0].workerId;
        this.serviceForm.roleId = "服务商普通用户";
        this.serviceForm.IdCard = data.IdCard;
        this.serviceForm.businessLicense = data.businessLicense;
        // this.serviceForm.isAuto=data.isAuto==true?1:2
        this.serviceForm.isAuto = Number(res.data[0].isAuto);
      });
    },
    // 点击审核 确定
    handlerShen() {
      const params = {
        id: this.serviceForm.id,
        examine: 1,
        userId: window.sessionStorage.getItem("userId"),
        roleId: this.serviceForm.roleId
      };
      this.postRequest(serviceExamine, params).then(res => {
        if (res.code == 200) {
          this.$message.success("审核成功");
          this.getmySearch();
          this.addServedialogVisible = false;
        }
      });
    },
    // 点击审核 拒绝
    handlerQu() {
      const params = {
        id: this.serviceForm.id,
        examine: 3,
        userId: window.sessionStorage.getItem("userId"),
        roleId: this.serviceForm.roleId
      };
      this.postRequest(serviceExamine, params).then(res => {
        if (res.code == 200) {
          this.$message.success("拒绝审核");
          this.getmySearch();
          this.addServedialogVisible = false;
        }
      });
    },
    // 点击删除
    handlerDelService(id) {
      const params = {
        id: id,
        userId: this.userId
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(serviceDel, params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getmySearch();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleClose() {
      this.$refs.serviceRef.resetFields();
      this.serviceForm.petName = "";
      this.serviceForm.workerId = "";
      this.serviceForm.businessLicense = [];
      this.serviceForm.IdCard = [];
    },
    hidehandleClose() {
      this.$refs.serviceRef.resetFields();
      this.addServedialogVisible = false;
    },
    // 修改列表中状态
    handlerStatus(e, data) {
      // console.log(e, data);
      if (data.isAuto == false) {
        data.isAuto = "2";
      } else if (data.isAuto == true) {
        data.isAuto = "1";
      }
      const params = {
        id: data.id,
        userId: window.sessionStorage.getItem("userId"),
        isAuto: data.isAuto
      };
      this.postRequest(serviceAuto, params).then(res => {
        if (res.code == 200) {
          this.$message.success("更新成功");
          this.getmySearch();
        }
      });
    },
    //获取服务商列表
    getmySearch() {
      const params = {
        pageSize: this.serverQuery.pageSize,
        pageNumber: this.serverQuery.pageNumber,
        serviceName: this.serverQuery.serviceName,
        userName: this.serverQuery.userName,
        scale: this.serverQuery.scale,
        name_province: this.serverQuery.prov,
        name_city: this.serverQuery.city,
        name_area: this.serverQuery.district,
        companyId: this.org_id
      };
      this.postRequest(mySearch, params).then(res => {
        if (res.code == 200) {
          this.serveList = res.data.data;
          this.servertotal = res.data.count;
          res.data.data.map(item => {
            if (item.isAuto == "1") {
              item.isAuto = true;
            } else if (item.isAuto == "2") {
              item.isAuto = false;
            }
          });
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.serverQuery.pageSize = val;
      this.getmySearch();
    },
    handleCurrentChange(val) {
      this.serverQuery.pageNumber = val;
      this.getmySearch();
    },
    // 拿到负责人id
    handleSelectworkerId(val) {
      // console.log(val);
      // this.serviceForm.workerId = val;
    },
    // 拿到角色id
    handleSelectroleId(val) {
      this.serviceForm.roleId = val;
    },
    // 拿到公司的id
    // handlercompanyId(val) {
    //   this.serviceForm.companyId = val;
    // },
    // 营业执照
    getImg(response) {
      // if (img && img !== "" && img !== null) {
      //   this.serviceForm.businessLicense = img;
      // }
      return (this.serviceForm.businessLicense = response.data.src);
    },
    //身份证
    getImg1(response) {
      // if (img && img !== "" && img !== null) {
      //   this.serviceForm.IdCard = img;
      // }
      return (this.serviceForm.IdCard = response.data.src);
    }
  },
  created() {
    this.getDataInit();
    this.provinceList = provinceJson.Region; // 获取地址级联数据
    this.userId = window.sessionStorage.getItem("userId");
    this.handlergetFreeWorker();
    // this.serviceForm.userId = window.sessionStorage.getItem("userId");
  }
};
</script>
<style lang="less">
// 服务商列表
.serveList {
  padding: 20px;
  // 服务商列表--按钮
  // .serveList_top {
  //   border: 1px solid #edeff4;
  //   margin-bottom: 20px;
  //   padding: 20px;
  // }
  .serveList_serach {
    border: 1px solid #edeff4;
    padding: 20px 20px 5px 20px;
  }
  .demo-ruleForm/deep/.el-form-item {
    margin-bottom: 15px;
  }
}
</style>
